<template>
  <section class="base-save" v-if="isShowSave">
    <section class="base-save-move" v-show="isShowSaveMove" @click="isShowSaveMove = false">
      <section class="base-save-move-box">
        <i class="iconfont icon-xiangzuo"></i>
        <i class="iconfont icon-save"></i>
        <section>{{ $t('customer.components.customizeFilterView.btns.btn4') }}</section>
      </section>
    </section>
    <!-- 视图未保存提示弹出框 -->
    <section class="base-save-dialog" v-show="!isShowSaveMove">
      <header class="base-save-dialog-header">
        <p>{{ $t('task.taskSave.notBeenSaved') }}</p>
        <section @click="taskSaveClose"><i class="iconfont icon-close"></i></section>
      </header>
      <footer>
        <el-button @click="saveAs">{{ $t('task.taskSave.saveAs') }}</el-button>
        <el-button v-if="hasSave" @click="overWriteCurrent">{{ $t('task.taskSave.overWriteCurrent') }}</el-button>
      </footer>
    </section>
    <base-modal :title="title" :show.sync="isShowView" width="528px" class="base-save-modal">
      <!--新增视图 -->
      <template v-if="currentType === 'saveAs'">
        <main class="base-save-modal-saveAs">
          <section>
            <span class="base-save-modal-saveAs-required">* </span><span>{{ $t('task.taskSave.viewName') }}</span>
          </section>
          <el-form :model="FormData" ref="formRef">
            <el-form-item prop="viewName" :rules="baseRule.viewName">
              <el-input :placeholder="$t('common.placeholder.input2')" v-model="FormData.viewName"></el-input>
            </el-form-item>
          </el-form>
        </main>
        <section slot="footer">
          <section class="base-save-modal-footer">
            <section class="base-save-modal-footer-left">
              <el-checkbox v-model="checked" :true-label="1" :false-label="0" class="base-save-modal-footer-left-view">{{ $t('task.taskSave.settingView') }}</el-checkbox>
            </section>
            <section class="base-save-modal-footer-right">
              <el-button @click="isShowView = false">{{ $t('common.base.cancel') }}</el-button>
              <el-button type="primary" @click="createView">{{ $t('common.base.save') }}</el-button>
            </section>
          </section>
        </section>
      </template>
      <!-- 覆盖当前视图 -->
      <template v-if="currentType === 'overWriteCurrent'">
        <main>
          <p>{{ $t('task.taskSave.modifyView') }}[{{ currentView.viewName }}]</p>
        </main>
        <section slot="footer">
          <el-button @click="isShowView = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="overWriteView">{{ $t('task.taskSave.overWrite') }}</el-button>
        </section>
      </template>
    </base-modal>
  </section>
</template>

<script>
/* api */
import { saveViewport, getViewUrl } from '@src/api/Viewport';
/* util */
import _ from "lodash"
export default {
  name: 'base-save',
  data() {
    return {
      isShowSaveMove: false,
      isShowView: false,
      // 是否展示保存
      isShowSave: false,
      currentType: '',
      checked: 0,
      // 表单
      FormData: {
        viewName: '',
      },
      // 搜索条件
      searchModel: [],
      baseRule: {
        viewName: [{ required: true, message: this.$t('customer.components.customizeFilterView.placeholder.name') }],
      }
    };
  },
  props: {
    // 保存按钮
    hasSave: {
      type: Boolean,
      default: true,
    },
    // 当前视图
    currentView: {
      type: Object,
      default: () => {},
    },
    // 点击保存之前
    beforeSave: {
      type: Function,
      default: null,
    },
    // 模块
    module: {
      type: String,
      default: '',
    },
    exceptionNodes: {
      type: String,
      default: '',
    },
    taskType: {
      type: String,
      default: '',
    },
    visualAngle: {
      type: String,
      default: '',
    },
    taskState: {
      type: String,
      default: '',
    }
  },
  computed: {
    title: {
      get() {
        return this.currentType === 'overWriteCurrent' ? this.$t('task.taskSave.overWriteCurrentView') : this.$t('task.taskSave.saveView');
      },
    },
  },
  methods: {
    /** 覆盖当前 */
    overWriteCurrent() {
      this.isShowView = true;
      this.currentType = 'overWriteCurrent';
    },
    /** 另存为  */
    saveAs() {
      this.isShowView = true;
      this.currentType = 'saveAs';
    },
    close() {
      this.isShowSave = false;
      this.isShowView = false;
    },
    /**新建视图 */
    async createView() {
      try {
        this.$refs.formRef.validate(async valid => {
          if (valid) {
            let params = {};
            // 获取当前模块url
            const res = await getViewUrl({ module: this.module });
            const url = res?.url;
            params = {
              viewName: this.FormData.viewName,
              module: this.module,
              url,
              searchModel: this.searchModel[0]?.fieldName !== '' ? this.searchModel : [],
              visibleType: this.checked,
            };
            // 工单列表保存后端接口需求
            if(['task'].includes(this.module)) {
              const reslut = this.beforeSave(params);
              params.searchModel.unshift(...reslut);
            }

            const res2 = await saveViewport(params);

            this.$emit('save', res2);

            this.close();
          }
        });
      } catch (error) {
        console.log('error', error);
      }
    },
    /** 覆盖视图 */
    async overWriteView() {
      try {
        let params = {};
        const currentView = _.cloneDeep(this.currentView);
        params = { ...currentView };
        // 搜索条件为空时，不存，会造成保存视图显示错误
        if(this.searchModel[0]?.fieldName !== '') {
          params.searchModel = this.searchModel;
        } else {
          params.searchModel = []
        }
        // 工单列表保存后端接口需求
        if(['task'].includes(this.module)) {
          params.shortcutConditions = {
            taskState: this.taskState,
            visualAngle: this.visualAngle,
            taskType: this.taskType,
            exceptionNodes: this.exceptionNodes
          }
          const reslut = this.beforeSave(params);
          params.searchModel.unshift(...reslut);
        }

        params.module = this.module;
        
        const res = await saveViewport(params);
        
        this.$emit('save', res);

        this.close();
      } catch (error) {
        console.log('error', error);
      }
    },
    taskSaveClose() {
      this.isShowSaveMove = true;
    },
    init() {
      if(this.isShowSave === false) {
        this.isShowSaveMove = false;
      } 

      this.FormData.viewName = '';
      
      this.checked = 0;
    },
    /** 是否展示保存 */
    open(isShowSaves, searchList) {
      this.isShowSave = isShowSaves;
      this.init();
      // 处理成后端接收的数据
      if(searchList.length > 0) {
        const searchModel = searchList.map(({ fieldName, operator, value, timeType }) => ({
          fieldName,
          operator,
          value,
          timeType,
        }));
        this.searchModel = searchModel;
      } else {
        this.searchModel = searchList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.base-save {
  position: absolute;
  bottom: 24px;
  right: 0%;
  z-index: 100;
  &-move {
    &-box {
      background-color: #fff;
      color: #595959;
      cursor: pointer;
      height: 38px;
      opacity: 1;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px 0 0 10px;
      box-shadow: 0 8px 32px rgba(38, 38, 38, 0.18);
      &:hover > section {
        max-width: 120px;
      }
      &:hover > .icon-xiangzuo {
        display: block;
        font-size: 12px;
      }
      &:hover > .icon-save {
        display: none;
      }
      .icon-xiangzuo {
        display: none;
      }
      .icon-save {
        display: block;
      }
      & > section {
        max-width: 0;
        transition: all 0.5s ease;
        overflow: hidden;
        margin-left: 6px;
        white-space: nowrap;
      }
    }
  }
  &-dialog {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(38, 38, 38, 0.18);
    height: 108px;
    overflow: hidden;
    padding: 10px 20px;
    position: relative;
    right: 10px;
    width: 335px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-header {
      p {
        font-weight: 600;
        font-size: 16px;
      }
      i {
        cursor: pointer;
      }
      display: flex;
      justify-content: space-between;
    }
    footer {
      button {
        &:first-child {
          background-color: $color-primary;
          color: #fff;
        }
        &:nth-child(2) {
          background-color: #f5f8fa;
        }
      }
    }
  }
  &-modal {
    &-saveAs {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      & > section {
        margin-bottom: 5px;
      }
      &-required {
        color: red;
      }
    }
  }
}
</style>
<style lang='scss'>
.base-save-modal-footer {
  width: 488px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>